JavaScript 비동기 프로그래밍

작업이 완료될 때까지 기다리지 않고, 오래 실행되는 작업을 시작한 뒤 그 동안 다른 이벤트에 응답할 수 있게 하는 기술.

비동기가 필요한 이유

• fetch() — HTTP 요청
• getUserMedia() — 카메라/마이크 접근
• showOpenFilePicker() — 파일 선택 요청

이처럼 시간이 걸리는 작업을 동기로 처리하면 UI가 멈춘다.

진화 단계: 콜백 → Promise → async/await

1. 콜백 (Callback)

이벤트 핸들러는 콜백의 특정 유형. "적절한 시점에 호출될 함수를 다른 함수에 전달"하는 패턴.

// 콜백 지옥 — 중첩이 깊어질수록 가독성이 떨어짐
chooseToppings(function (toppings) {
  placeOrder(toppings, function (order) {
    collectOrder(order, function (pizza) {
      eatPizza(pizza);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

2. Promise

이전 작업이 완료될 때까지 다음 작업을 연기하거나 에러를 깔끔하게 처리할 수 있는 객체.

특징:

• 결과 반환 시간을 보장하지는 않지만, 반환 시 다음 코드로 진행시킴
• 한 번에 성공/실패 중 하나만 가짐
• 다음 코드 블록을 막지 않음 (Non-blocking)

// Promise 체이닝
chooseToppings()
  .then((toppings) => placeOrder(toppings))
  .then((order) => collectOrder(order))
  .then((pizza) => eatPizza(pizza))
  .catch(failureCallback);

then()도 Promise를 반환하기 때문에 체이닝이 가능하다.

3. XMLHttpRequest (초기 비동기 API)

const xhr = new XMLHttpRequest();
xhr.onload = function() { /* 완료 처리 */ };
xhr.onerror = function() { /* 에러 처리 */ };
xhr.open('GET', url);
xhr.send();

이벤트 루프 연계

비동기 작업의 콜백은 **이벤트 큐(Event Queue)**에 등록되고, 이벤트 루프가 콜 스택이 비었을 때 꺼내 실행한다.

관련: 이벤트 루프와 Pub-Sub

참고

• MDN 비동기 JS 소개
• 학습 출처: 네이버 부스트캠프 챌린지 Day11